<template>
  <view class="dSLComVue">
    <u-navbar>
      <view class="dSLComVueTop">
        <view class="dSLComVueTopLeft">
          <image
            src="/static/img/ss@2x.png"
            class="dSLComVueTopLeftImg"
            style="width: 30rpx; height: 30rpx; flex: none"
          ></image>
          <input
            auto-focus="true"
            class="dSLComVueTopLeftInput"
            v-model="search_input"
            type="text"
            :placeholder="placeholder"
            @blur="onClickInput"
          />
          <view class="dSLComVueTopLeftDel" v-if="search_input" @click="onClickDel">
            <image
              src="/static/close.png"
              class="dSLComVueTopLeftDelImg"
              style="width: 35rpx; height: 35rpx; flex: none"
            ></image>
          </view>
        </view>
        <view class="dSLComVueTopRight">
          <view @click="onClickInput" class="dSLComVueTopRightBtn">{{
            search_name ? search_name : '搜索'
          }}</view>
        </view>
      </view>
    </u-navbar>

    <view v-if="is_show_more" class="dSLComVue">
      <view class="dSLComVueTitle">
        <text>搜索历史</text>
        <view
          style="
            width: 100rpx;
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          "
          @click="onClickDelAll"
        >
          <image
            src="/static/sc.png"
            style="width: 30rpx; height: 30rpx; margin-right: 35rpx"
          ></image>
        </view>
      </view>

      <view v-if="search_list_old.length == 0" class="mytext">暂无</view>
      <view class="dSLComVueLog" v-if="search_list_old.length > 0">
        <text
          class="dSLComVueLogBox mytext"
          v-for="(item, index) in search_list_old"
          :key="index"
          @click="onClickInputValue(item)"
        >
          {{ item ? item : '无' }}
        </text>
      </view>

      <view class="dSLComVueTitle" v-if="search_list_hot.length > 0" style="margin-top: 20rpx">
        <text>热门搜索</text>
        <view
          style="
            width: 100rpx;
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          "
          @click="onClickShowHot"
        >
          <image
            :src="is_hot_show ? '/static/icon_img/yan_open.png' : '/static/icon_img/yan_close.png'"
            style="width: 30rpx; height: 30rpx; margin-right: 35rpx"
          ></image>
        </view>
      </view>

      <view class="dSLComVueLog" v-if="search_list_hot.length > 0 && is_hot_show">
        <text
          class="dSLComVueLogBox mytext"
          v-for="(item, index) in search_list_hot"
          :key="index"
          @click="onClickInputValue(item)"
        >
          {{ item ? item : '无' }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      search_list_old: [],
      search_input: '',
      is_hot_show: true,
      is_show_more: true,

      search_list_hot: [],
      //HM修改 定义默认搜索关键词(水印文字)
      placeholder: '请输入搜索内容',
      store_key: 'search_list',

      color_border: '',
      color_text: '#30c66c',
      search_name: '搜索',
      input_text: ''
    }
  },
  created() {
    this._init_search()
  },

  watch: {
    search_list_hot(newVal) {
      if (newVal) {
        this.search_list_hot = newVal
      }
    },
    input_text(newVal) {
      if (newVal) {
        this.search_input = newVal
        // this.search_input = search_input.toLowerCase()

        this.saveKeyword()
      }
    }
  },
  methods: {
    onClickInput() {
      if (this.search_input == '') {
        return
      }
      this.saveKeyword()
      uni.navigateTo({
        url: '/goods/goods-search-list/goods-search-list?keyword=' + this.search_input
      })
    },
    onClickInputValue(search_input) {
      if (!search_input) {
        return false
      }
      this.search_input = search_input.toLowerCase()
      this.onClickInput()
    },
    _init_search() {
      var that = this

      var store_key = that.store_key

      uni.getStorage({
        key: store_key,
        success: (res) => {
          var old_data = JSON.parse(res.data)
          that.search_list_old = old_data //更新历史搜索
        }
      })
    },
    saveKeyword() {
      var that = this

      // console.log('搜索的名称为：'+this.search_input)
      if (!this.search_input) {
        return false
      }

      this.search_input = this.search_input.toLowerCase()

      var search_input = this.search_input

      var store_key = that.store_key

      console.log(this.search_input)
      uni.getStorage({
        key: store_key,
        success: (res) => {
          console.log(res)
          var old_data = JSON.parse(res.data)
          var findIndex = old_data.indexOf(search_input)
          if (findIndex == -1) {
            old_data.unshift(search_input)
            console.log('---', old_data)
          } else {
            old_data.splice(findIndex, 1)
            old_data.unshift(search_input)
          }
          //最多10个纪录
          old_data.length > 10 && old_data.pop()
          console.log(old_data)
          uni.setStorage({
            key: store_key,
            data: JSON.stringify(old_data)
          })
          that.search_list_old = old_data //更新历史搜索
        },
        fail: (e) => {
          var old_data = [search_input]
          uni.setStorage({
            key: store_key,
            data: JSON.stringify(old_data)
          })
          that.search_list_old = old_data //更新历史搜索
          // console.log('____________________dev')
          // console.log(that.search_list_old)
          // console.log('____________________dev')
        }
      })
      //	向父级发送搜索的事件
      //that.$emit('onSearchNameApi', this.search_input);
      //
    },
    onClickDel() {
      this.search_input = ''
      this.$emit('onSearchNameApi', '')
    },

    onClickDelAll() {
      var that = this
      console.log('---全部删除-log--')
      uni.showModal({
        title: '提示',
        content: '确定全部删除',
        success(res) {
          if (res.confirm) {
            uni.removeStorageSync(that.store_key)
            that.search_list_old = []
            // console.log('______清除全部搜索记录______向上级发送事件')
            that.$emit('onClickDelAllApi', '')
          }
        }
      })
    },
    //
    onClickShowHot() {
      this.is_hot_show = this.is_hot_show == true ? false : true
    }
  }
}
</script>

<style lang="scss">
.myborder {
  border: 1rpx solid #60df9d;
  color: #30c66c;
}

.mytext {
  color: #8799a3;
}

.dSLComVue {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;

  .dSLComVueTop {
    width: 99%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 40rpx;

    .dSLComVueTopLeft {
      flex: 1;
      height: 60rpx;
      background-color: #e8e8e8;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 3%;
      // background-color: #ccc;
      border: 1rpx solid #f2f2f2;

      .dSLComVueTopLeftImg {
        flex: 1;
        height: 80rpx;
      }

      .dSLComVueTopLeftInput {
        flex: 1;
        height: 60rpx;
        padding: 0 20rpx;
      }

      .dSLComVueTopLeftDel {
        width: 70rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }

    .dSLComVueTopRight {
      width: 100rpx;
      margin-left: 30rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .dSLComVueTopRightBtn {
        width: 120rpx;
        height: 60rpx;
        border-radius: 30rpx;
        margin-right: 30rpx;
        font-size: 30rpx;
        // color: red;
        display: flex;
        // color: #ff00ff;
        // border:1rpx solid #ff00ff;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .dSLComVueTitle {
    width: 100%;
    height: 80rpx;
    display: flex;
    font-weight: 600;
    font-size: 26rpx;
    align-items: center;
    // background-color: #30c66c;
    align-items: center;
    justify-content: space-between;
    padding-left: 5%;
  }

  .dSLComVueLog {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .dSLComVueLogBox {
      line-height: 55rpx;
      background-color: #e8e8e8;
      padding: 0rpx 30rpx;
      border-radius: 30rpx;
      flex: none;
      margin: 10rpx 25rpx 15rpx 0;
      // border: 1rpx solid #ccc
    }
  }
}
</style>
